<script setup lang="ts">
import { useDesignStore } from '@/stores'

defineOptions({
  name: 'AsideToggler',
})
const designStore = useDesignStore()
</script>

<template>
  <div class="open-toggle" @click="designStore.toggleAsideToggler">
    <i class="w-24px h-24px block" :class="designStore.asideTogglerOpened ? 'i-ant-design:left-outlined' : 'i-ant-design:right-outlined'" />
  </div>
</template>

<style lang="less" scoped>
.open-toggle {
  position: absolute;
  width: 36px;
  height: 36px;
  display: flex;
  justify-content: center;
  align-items: center;
  right: 0;
  top: 50%;
  transform: translate(50%, -50%);
  background-color: #ffffff;
  border-color: #4c4c4c;
  border-width: 1px;
  border-style: solid;
  color: #39addf;
  box-shadow: 2px 2px 4px rgba(0,0,0,.08);
  cursor: pointer;
  font-weight: 500;
  border-radius: 50%;
  transition: 0.3s;
  &:hover {
    background-color: #1a1a1a;
  }
}
</style>
